<template>
  <view class="body">
    <view class="lists" v-if="dataList && dataList.length > 0">
      <view v-for="(item, index) of dataList" :key="index" class="item">
        <view class="top">
          <view class="name_date">
            <view class="name">{{ userInfo.patName }}</view>
            <view class="date">{{ item.reportTime }}</view>
          </view>
          <view class="department">{{ item.orgName }}</view>
          <view class="num">体检号: {{ item.reportNo }}</view>
        </view>
        <view class="bottom">
          <view @tap="physicalReport(item)" class="bottom_left">查看体检报告</view>
          <view @tap="toHealthManage(item)" class="bottom_right">查看健康管理报告</view>
          <image class="img_btn" src="@/static/image/raozg/physical_button.png"></image>
        </view>
      </view>
    </view>
    <view v-else class="nodate">
      <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
      <view class="nodate_text">
        <text class="name">暂无数据</text>
      </view>
    </view>
    <up-modal
      :show="modalShow"
      :title="'提示'"
      :closeOnClickOverlay="true"
      :confirmColor="'#00D1B6'"
      confirmText="去填写"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="modalShow = false"
      @close="modalShow = false"
    >
      <view
        style="width: 100%; text-align: center; color: #4e5969; font-size: 30rpx; font-weight: 400"
        >您尚未完成健康评估问卷，若需查看健康管理报告，请先完成健康评估问卷</view
      >
    </up-modal>
    <u-overlay :show="show">
      <view class="overlays">
        <image class="img_generate" src="https://ainengli.hzjrsw.com/jkhx/generate.png"></image>
        <view class="generate_text">您的健康管理报告已生成！</view>
        <view @tap="toBuy" class="buy_btn">去购买</view>
        <image class="close_img" src="@/static/image/raozg/close.png" @click="show = false"></image>
      </view>
    </u-overlay>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import store from '@/store'
import { formatDate } from '@/utils/util'
import { getPeList, getPdf } from '@/api/report'

const modalShow = ref(false)
const show = ref(false)
const userInfo = ref({})

const dataList = ref([])

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  getList()
})

const getList = () => {
  getPeList(userInfo.value.empi).then((res) => {
    dataList.value = res.data
  })
}

const physicalReport = (item: any) => {
  uni.navigateTo({
    url: '/packA/pages/report/physicalDetail?time=' + item.reportTime + '&reportNo=' + item.reportNo
  })
}
const confirm = () => {
  if (userInfo.value.questionState) {
    uni.navigateTo({
      url: '/packA/pages/questionaire/enter'
    })
  } else {
    uni.navigateTo({
      url: '/packA/pages/questionaire/index'
    })
  }
}
const toHealthManage = (item: any) => {
  if (!userInfo.value.questionState) {
    modalShow.value = true
    return
  }
  if (!userInfo.value.isVip) {
    show.value = true
    return
  }
  const params = {
    reportNo: item.reportNo,
    empi: userInfo.value.empi
  }
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  getPdf(params).then((res) => {
    if (res.code == 0) {
      uni.downloadFile({
        url: res.data,
        success: function (res) {
          uni.hideLoading()
          if (res.statusCode === 200) {
            // 调用wx.openDocument打开文件
            uni.openDocument({
              filePath: res.tempFilePath,
              success: function (res) {
                console.log('打开文档成功')
              },
              fail: function (err) {
                console.log('打开文档失败', err)
              }
            })
          }
        },
        fail: function (err) {
          uni.hideLoading()
          console.log('下载文件失败', err)
        }
      })
    }
  })
}
const toBuy = () => {
  uni.navigateTo({ url: '/packA/pages/buyMember/index?source=physicalList' })
}
</script>

<style lang="scss" scoped>
.body {
  background: #f3f7f8;
  .lists {
    width: 100%;
    height: 100vh;
    padding: 34rpx 32rpx;
    box-sizing: border-box;
    overflow: auto;
    .item {
      margin-bottom: 24rpx;
      .top {
        width: 100%;
        height: 220rpx;
        padding: 32rpx;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 16rpx 16rpx 0 0;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        .name_date {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;
          .name {
            font-weight: 500;
            font-size: 34rpx;
            color: #222222;
          }
        }
        .num {
          margin-top: 16rpx;
        }
      }
      .bottom {
        width: 100%;
        height: 88rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bottom_left {
          margin-left: 88rpx;
          position: relative;
          z-index: 2;
        }
        .bottom_right {
          margin-right: 56rpx;
          position: relative;
          z-index: 2;
        }
        .img_btn {
          position: absolute;
          width: 686rpx;
          height: 88rpx;
          bottom: 0;
          left: 0;
          z-index: 1;
        }
      }
    }
  }
  .nodate {
    text-align: center;
    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 240rpx;
    }
    .nodate_text {
      .name {
        display: block;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-top: 10rpx;
      }
    }
  }
  .overlays {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .img_generate {
    width: 580rpx;
    height: 622rpx;
    margin: 150rpx auto 0;
  }
  .generate_text {
    margin: -400rpx auto 0;
    position: relative;
    z-index: 10;
    font-weight: 600;
    font-size: 40rpx;
    color: #003e41;
  }
  .buy_btn {
    width: 500rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: linear-gradient(337deg, #00d1b6 0%, #42f1da 100%);
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(2, 188, 195, 0.2);
    border-radius: 44rpx;
    margin: 192rpx auto 0;
    position: relative;
    z-index: 10;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
  }
  .close_img {
    width: 64rpx;
    height: 64rpx;
    margin: 120rpx auto 0;
  }
  ::v-deep .u-modal__title {
    font-weight: 500 !important;
    font-size: 36rpx !important;
    color: #222222 !important;
  }
  ::v-deep .u-modal__content view {
    color: #666 !important;
  }
}
</style>
